<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Breeze Waterfall Example</title>
  <style>
    .container {
      width: 800px;
      margin: 0 auto;
    }

    .waterfall-item {
      margin-bottom: 10px;
      border-radius: 4px;
      overflow: hidden;
    }

    .waterfall-item img {
      width: 100%;
      display: block;
      transition: opacity 0.3s ease-in-out;
    }

    .breeze-waterfall-image {
      opacity: 0.5;
      height: 300px;
      object-fit: cover;
      background: #f0f0f0;
    }
  </style>
</head>

<body>
  <div class="container" id="waterfall"></div>
  <script type="module">
    import { BreezeWaterfall } from 'http://162.14.112.43:3000/static/index.js';

    // 等待库加载完成
    window.addEventListener('load', function () {
      const container = document.getElementById('waterfall');
      const waterfall = new BreezeWaterfall({
        // 必需参数
        container,
        // 布局参数
        width: '100%',  // 容器宽度
        count: 3,       // 默认列数
        gap: '10px',    // 项目间距
        // 样式参数
        itemClass: 'breeze-waterfall-item',  // 项目类名
        // 响应式参数
        responsive: true,  // 启用响应式
        breakpoints: [     // 自定义断点配置
        { width: 480, columns: 1 },   // 手机竖屏
        { width: 768, columns: 2 },   // 平板竖屏
        { width: 1024, columns: 3 },  // 平板横屏/小屏笔记本
        { width: 1440, columns: 4 }   // 大屏显示器
    ],
        // 动画参数
        animation: true,           // 启用动画
        animationDuration: 300     // 动画时长(ms)
      });

      // 添加示例项目
      for (let i = 0; i < 20; i++) {
        const item = document.createElement('div');
        const img = document.createElement('img');
        // 使用 Picsum 随机图片API
        img.src = `https://picsum.photos/400/${Math.floor(Math.random() * 200) + 300}`;
        img.alt = `Random Image ${i + 1}`;
        img.className = 'breeze-waterfall-image';
        img.onload = () => {
          img.style.opacity = '1';
          img.style.height = 'auto';
          img.style.background = 'none';
        };
        img.onerror = () => {
          // 图片加载失败时，保持预加载框的样式
          img.style.opacity = '0.5';
          img.style.height = '300px';
          img.style.background = '#f0f0f0';
        };
        item.appendChild(img);
        waterfall.addItem(item);
      }
    });
  </script>
</body>

</html>